<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>青春宿舍物语</title>
	<link rel="stylesheet" href="css/style.css" type="text/css" />
	<style>
		.module-container {
			display: flex;
			gap: 30px;
			/* 两个模块之间的间距 */
			margin: 20px auto;
			/* 上下留出20px空白，左右自动居中 */
			padding: 0 0px;
			/* 左右留出20px空白 */
			max-width: 1200px;
			/* 与banner的宽度一致 */
			box-sizing: border-box;
			/* 确保padding不会影响总宽度 */
		}

		.notice-board,
		.funny-stories {
			flex: 1;
			/* 让两个模块平分宽度 */
			padding: 15px;
			background-color: #f9f9f9;
			/* 默认背景颜色 */
			border-radius: 8px;
			/* 圆角效果 */
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			/* 阴影效果 */
		}

		.notice-board {
			background-color: #e3f2fd;
			/* 浅蓝色背景 */
		}

		.funny-stories {
			background-color: #fff3e0;
			/* 浅橙色背景 */
			margin-top: 40px;
			/* 增加上边距 */
		}

		.notice-board h2,
		.funny-stories h2 {
			font-size: 20px;
			color: #333;
			margin-bottom: 10px;
		}

		.notice-board ul {
			list-style-type: none;
			padding: 0;
		}

		.notice-board ul li {
			padding: 5px 0;
			color: #555;
		}

		.funny-stories .story {
			margin-bottom: 10px;
			padding: 10px;
			background-color: #fff;
			/* 故事内容背景颜色 */
			border-radius: 5px;
			border: 1px solid #ddd;
		}

		.funny-stories .story span {
			display: block;
			text-align: right;
			color: #888;
			font-size: 14px;
		}
	</style>
</head>

<body>
	<header>
		<div class="top">
			<div class="box">
				<div class="welcome">欢迎来的10215宿舍</div>
				<div class="topnav">
					<ul>
						<li><a href="注册登录.html">登录|注册</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="logo-search box">
			<div class="logo">
				<img src="img/logo.jpg" alt="" />
				<h2></h2>
			</div>
			<div class="search">
				<form action="">
					<input type="text" placeholder="请输入关键词……" class="input_text" />
					<input type="submit" value="搜索" class="input_submit" />
					<button class="searchbtn" onclick="searchtopic()"></button>
				</form>
			</div>
		</div>
	</header>
	<nav>
		<ul class="daohanglan">
			<li class="dropdown">
				<a href="index.html" class="dropbtn">首页</a>
			</li>
			<li class="dropdown">
				<a href="宿舍成员.html" class="dropbtn">宿舍成员</a>
			</li>
			<li class="dropdown">
				<a href="宿舍生活2.html" class="dropbtn">宿舍生活</a>
			</li>
			<li class="dropdown">
				<a href="宿舍故事.html" class="dropbtn">宿舍故事</a>
			</li>
		</ul>
	</nav>
	<!-- 轮播 -->
	<div class="banner">
		<div class="banner-container">
			<div class="banner-item">
				<img src="img/合照.jpg" alt="Image 1">
			</div>
			<div class="banner-item">
				<img src="img/合照2.jpg" alt="Image 2">
			</div>
			<div class="banner-item">
				<img src="img/合照3.jpg" alt="Image 3">
			</div>
			<div class="banner-item">
				<img src="img/合照4.jpg" alt="Image 4">
			</div>
			<div class="banner-item">
				<img src="img/biy.png" alt="Image 5">
			</div>
		</div>
		<!-- 轮播控制按钮 -->
		<button class="prev-btn">&#10094;</button>
		<button class="next-btn">&#10095;</button>
	</div>
	<script>
		let currentIndex = 0; // 当前显示的图片索引
		const bannerContainer = document.querySelector('.banner-container');
		const totalItems = document.querySelectorAll('.banner-item').length;

		// 切换到下一张图片
		function nextSlide() {
			currentIndex = (currentIndex + 1) % totalItems;
			updateSlide();
		}

		// 切换到上一张图片
		function prevSlide() {
			currentIndex = (currentIndex - 1 + totalItems) % totalItems;
			updateSlide();
		}

		// 更新轮播图位置
		function updateSlide() {
			const offset = -currentIndex * 100;
			bannerContainer.style.transform = `translateX(${offset}%)`;
		}

		// 自动轮播
		let autoPlay = setInterval(nextSlide, 3000); // 3秒切换一次

		// 鼠标悬停时停止自动轮播
		const banner = document.querySelector('.banner');
		banner.addEventListener('mouseenter', () => {
			clearInterval(autoPlay);
		});

		// 鼠标离开时恢复自动轮播
		banner.addEventListener('mouseleave', () => {
			autoPlay = setInterval(nextSlide, 3000);
		});

		// 绑定按钮事件
		document.querySelector('.prev-btn').addEventListener('click', prevSlide);
		document.querySelector('.next-btn').addEventListener('click', nextSlide);
	</script>

	<!-- 新增模块：宿舍公告栏和宿舍趣事分享 -->
	<div class="module-container">
		<!-- <div class="notice-board">
			<h2>宿舍公告栏</h2>
			<ul>
				<li>📢 本周五晚上7点宿舍聚餐，地点：学校食堂三楼</li>
				<li>🧹 下周轮到王乐乐打扫卫生，请大家保持整洁哦！</li>
				<li>🎉 宿舍文化节即将开始，大家准备好节目了吗？</li>
			</ul>
		</div> -->
		<div class="funny-stories">
			<h2>宿舍公告栏</h2>
			<div class="story">
				<p>📢 本周五晚上7点宿舍聚餐，地点：学校食堂三楼</p>
			</div>
			<div class="story">
				<p>🧹 下周轮到王乐乐打扫卫生，请大家保持整洁哦！</p>
			</div>
			<div class="story">
				<p>🎉 宿舍文化节即将开始，大家准备好节目了吗？</p>
			</div>
		</div>
		<div class="funny-stories">
			<h2>宿舍趣事分享</h2>
			<div class="story">
				<p>👻 昨晚黄晚晴梦游，居然在宿舍里跳起了舞，大家都笑疯了！</p>
				<span>—— 戴海琴</span>
			</div>
			<div class="story">
				<p>🍜 高晨雨煮泡面时不小心把调料包全撒了，结果宿舍弥漫着一股“神秘”的香味～</p>
				<span>—— 王乐乐</span>
			</div>
		</div>
	</div>

	<footer>
		<div class="copyright">
			<p>戴海琴|高晨雨|黄晚晴|王乐乐</p>
			<p>10215宿舍 版权所有</p>
		</div>
	</footer>
</body>

</html>